const HtmlWebpackPlugin = require('html-webpack-plugin')
//const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
// CSS代码压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
// Vue loader
const VueLoaderPlugin = require("vue-loader/lib/plugin");

const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  // 'vue-style-loader',
  'css-loader',
  "postcss-loader"
]

// NODE ENV 开发环境配置
process.env.NODE_ENV = "development"

module.exports = {
  entry: "./src/js/main.js",
  output: {
    path: `${__dirname}/dist`,
    filename: "js/[name].[contenthash:6].js",
    // 路径
    publicPath: "./"
  },
  target: ['web', 'es5'],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          "thread-loader",
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: {
                      //core-js的版本
                      version: 3
                    },
                    //需要兼容的浏览器
                    targets: {
                      chrome: '60',
                      firefox: '60',
                      ie: '11'
                    }
                  }
                ]
              ]
            }
          }
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/i,
        use: [
          //提取css文件
          ...commonCssLoader
        ],
      },
      {
        test: /\.less$/i,
        use: [
          ...commonCssLoader,
          "less-loader"
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        // 通用资源类型
        type: 'asset',
        // 现在，webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择：
        // 小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
        // 自定义设置
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024
          }
        },
        generator: {
          filename: "img/[contenthash:7][ext][query]"
        }
      },
      {
        test: /\.svg$/i,
        type: 'asset/inline'
      },
      {
        test: /\.html?$/i,
        loader: 'html-loader'
      },
      {
        exclude: /\.(png|jpe?g|gif|html?|svg|less|css|js|vue)$/,
        type: "asset/resource",
        generator: {
          filename: './assets/[contenthash:7][ext][query]'
        }
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "css/main.css"
    }),
    new VueLoaderPlugin()
  ],
  //优化配置
  optimization: {
    //设置为true ,不管是生产模式还是开发模式都压缩
    //如果不设置，只有生产模式才压缩
    // minimize: true,
    //压缩代码使用的工具
    minimizer: [
      //css压缩插件
      new CssMinimizerPlugin()
    ],
    splitChunks: {
      chunks: "all"
    }
  },
  // resolve: {
  //   alias: {
  //     'vue$': 'vue/dist/vue.esm.js'
  //   }
  // },
  mode: "development",
  devServer: {
    contentBase: `${__dirname}/dist`,
    compress: true,
    port: 30000,
    open: true,
    hot: true
  },
  /*
   * 开启source map
   *  常用：
   *  inline-source-map
   *    - 只生成一个内联source map
   *  hidden-source-map
   *    - 外部source map
   *  eval-source-map
   *    - 每个文件都生成一个对应的source map 都在eval
   */
  devtool: "eval-source-map"
}
